<template>
  <view class="page">
    <uni-nav-bar ref="navBar" fixed statusBar title="订单确认" :border="false" backgroundColor="#ffffff"
      @clickLeft="goBack">
      <template v-slot:left>
        <image src="@/static/svg/publicSvg/icon-back.svg" />
      </template>
    </uni-nav-bar>
    <view v-if="detail">
      <view class="detail-box">
        <view class="flex">
          <image :src="detail.goodsImgs" mode="" class="goods-img"></image>
          <view class="goods-dec flex flex-col justify-between">
            <view class="goods-name">{{detail.goodsName}}</view>
            <view class="goods-price">¥{{detail.goodsPrice}}</view>
          </view>
        </view>
        <view class="goods-msg">
          <view class="flex goods-no">
            <view class="flex gary-color">
              <view class="goods-no-title">订单编号</view>：
            </view>{{detail.subOrderNo}}
          </view>
          <view class="flex goods-no">
            <view class="flex gary-color">
              <view class="goods-no-title">购买人</view>：
            </view>{{detail.orderMobile}}
          </view>
          <view class="flex goods-no">
            <view class="flex gary-color">
              <view class="goods-no-title">下单时间</view>：
            </view>{{detail.orderTime}}
          </view>
          <view class="flex goods-no">
            <view class="flex gary-color">
              <view class="goods-no-title">核销码</view>：
            </view>{{detail.verifyCode}}
          </view>
        </view>

      </view>
      <view class="release-btn" @click="submit">确认核销</view>
      <view class="release-btn" v-if="userInfo && userInfo.merchantName.indexOf('万商') !== -1" @click="submitAndPrint"
        style="margin-top: 24rpx;">
        确认核销并打印</view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getByVerifyCode,
    submitVerifyByCode,
    printEnrollInfo
  } from '@/api/order.js'
  import {
    useUserStore
  } from '@/stores/modules/user.js'
  const userStore = useUserStore()
  const userInfo = userStore.userInfo
  console.log(userInfo.merchantName)
  let getOpenerEventChannel = ref(null)
  let detail = ref(null)
  let detailId = ref(null)
  let getDetail = async () => {
    let result = await getByVerifyCode({
      verifyCode: detailId.value
    })
    // console.log(result,'的')
    if (result) {
      detail.value = result;
    }
  }
  onLoad(({
    id
  }) => {
    detailId.value = id
    getDetail()
    getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
    // getOpenerEventChannel.value.on('acceptData',data => {
    // 	detail.value = data.data
    // })
  })
  const submit = async () => {
    uni.showLoading()
    submitVerifyByCode({
      verifyCode: detail.value.verifyCode
    }).then(res => {
      uni.hideLoading()

      uni.showToast({
        icon: 'none',
        title: res.message,
        complete() {
          getOpenerEventChannel.value.emit('reFreshPage', 'refresh')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      })

    }).catch(err => {
      uni.hideLoading()
      uni.showToast({
        icon: 'none',
        title: err.message
      })
    })
  }
  const submitAndPrint = async () => {
    uni.showLoading()
    submitVerifyByCode({
      verifyCode: detail.value.verifyCode
    }).then(res => {
      uni.hideLoading()

      // 打印报名信息
      printEnrollInfo({
        verifyCode: detail.value.verifyCode
      }).then(res => {
        console.log(res, 'are you ok?')
      })

      uni.showToast({
        icon: 'none',
        title: res.message,
        complete() {
          getOpenerEventChannel.value.emit('reFreshPage', 'refresh')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      })

    }).catch(err => {
      uni.hideLoading()
      uni.showToast({
        icon: 'none',
        title: err.message
      })
    })
  }
  const goBack = () => {
    if (getCurrentPages().length === 1) {
      uni.reLaunch({
        url: "/homePages/pages/home/home"
      });
      return;
    }
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .detail-box {
    margin: 10px 20px;
    box-sizing: border-box;
    // width: calc(100% - 40px);
    padding: 10px 14px;
    background-color: #ffffff;
    border-radius: 8px;

    .goods-img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
    }

    .goods-dec {
      width: calc(100% - 80px);
      margin-left: 20px;
    }

    .goods-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0px;
      color: rgba(51, 51, 51, 1);
    }

    .goods-price {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      color: rgba(250, 69, 67, 1);
    }

    .goods-msg {
      border-top: 1px solid rgba(245, 245, 245, 1);
      margin-top: 10px;
      padding-top: 10px;
    }

    .goods-no {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0px;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 6px;
    }

    .goods-no-title {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: justify;
      text-align-last: justify;
      width: 60px;
      color: rgba(51, 51, 51, 0.6);
    }

    .gary-color {
      color: rgba(51, 51, 51, 0.6);
    }
  }

  .release-btn {
    // width: 343px;
    height: 46px;
    padding: 12px, 20px, 12px, 20px;
    border-radius: 8px;
    // gap: 10px;
    background: #FA4543;
    color: #ffffff;
    margin: 10px 20px;
    text-align: center;
    line-height: 46px;
  }
</style>